Feature/certificate download #9449

emmanuelbaa · 2025-12-17T21:08:11Z

Description

This pull request implements a feature that allows admins to upload certificate templates and enables users to download a certificate after completing a course.

When a user downloads a certificate, the template is dynamically updated to include:

The user’s name
The completed course title

This ensures each generated certificate is personalized based on the user and the course taken.

button to upload a template

uploaded template preview

button to change uploaded template

Mutugiii · 2025-12-19T14:30:52Z

src/app/manager-dashboard/certifications/certifications-add.component.ts

+    if (this.selectedFile) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        localStorage.setItem(`certification-attachment-${this.certificateInfo._id}`, JSON.stringify({


You're currently storing attachments to localstorage instead of to couchdb

i will correct that.

Made changes after some iterations please review.

Add getAttachment method to CouchService to enable fetching of attachment data from CouchDB. Modify UsersAchievementsComponent to fetch certificate template attachments and use them as background images in the generated PDF achievements. This addresses the feedback regarding using doc.addImage for efficiency.

Refactor CertificationsAddComponent to remove the usage of localStorage for temporarily storing certificate attachments. The component now fetches attachments directly from CouchDB when editing an existing certification. The selected file is held in memory until the form is submitted.

Implement a 'draft' workflow for certificate attachments. When a user selects a file for a new certificate, a draft document is created in CouchDB and the file is uploaded as an attachment. This ensures that the selected attachment persists across page reloads and navigations, using CouchDB as the storage backend instead of localStorage.

The getAttachment method was using couchDBReq with a full URL, which was incorrect. It was also casting the responseType of 'blob' as 'json'. This commit corrects the getAttachment method to use http.get directly with the correct responseType ('blob') and proper URL construction and error handling. This should resolve the issue of attachments not being loaded correctly on page refresh.

Refactor certificate attachment handling to follow the same pattern as the user profile edit page. - Remove the 'draft' workflow and associated service methods. - Load existing attachments using a direct URL for previews. - Convert newly selected images to base64 and send them inline with the document on submission. This ensures that attachments are persisted correctly and are not lost on page refresh, addressing the user's feedback.

Add an image preview to the template to display the certificate template. The preview is only shown if it's not the default placeholder image. Also, change the 'Upload' button text to 'Change Template' if an image is already present. This provides visual feedback to the user and resolves the issue of the attachment appearing to be lost on page refresh.

Revert the change that added an on-page preview for the certificate template. The user has requested that the preview only be visible in the dialog. The underlying logic for attachment persistence remains in place.

Re-adds the image preview to the certificate add/edit page. This resolves the issue where the attachment appeared to be lost on page refresh because it was not being displayed. The component now shows a preview of the existing template on load, and updates the preview when a new template is selected.

Refactor the certificate add/edit component to correctly handle image attachments, preventing data loss on page refresh. - The component now displays a preview of the existing certificate template on load. - Implemented an 'unsaved changes' guard to prevent accidental navigation away from the page with unsaved modifications to the form or the attachment. - The image preview dialog is now more robust and can handle both File objects and URL strings. - Aligned the attachment handling pattern with the existing 'edit profile' functionality for consistency.